<template>
  <div>
    <div class="operate">
      <el-button text type="primary" @click="handleSave">保存</el-button>
      <el-button text @click="handlePreview">预览</el-button>
      <el-button text @click="handleGetJson">导出JSON</el-button>
      <el-button text type="danger" @click="store.deleteDesign">删除</el-button>
    </div>

    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="组件设置" name="FieldSet">
        <el-scrollbar max-height="90vh">
          <FieldSet></FieldSet>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="表单设置" name="second">
        <FormSet></FormSet>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="visibleForm" title="预览" append-to-body :close-on-click-modal="false">
      <div class="dialog-content w-100" v-if="visibleForm">
        <AplidForm v-bind="formConfig">
        </AplidForm>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
import apiMod from '@/apiMod'
import FieldSet from './FieldSet.vue'
import FormSet from './FormSet.vue'
import { useDesign } from '@/stores/design'
const store = useDesign()
const { componentIndex, componentList, widgetFormConfig } = storeToRefs(store)

type Props = {
  templateId?:number| string
  templateNo?:number| string
}
const props = withDefaults(defineProps<Props>(), {})
const emit = defineEmits(['refresh'])
const activeName = ref('FieldSet')
const formMode: any = ref({})
const formConfig = ref({})
const visibleForm = ref(false)

const handleSave = () => {
  const query = {
    id: props.templateId,
    templateNo: props.templateNo,
    jsonStr: getFormateData()
  }

  apiMod.view_tableTemplate_edit(query).then(res => {
    emit('refresh')
    ElMessage.success('操作成功！')
  })
}

watch(
  () => componentIndex.value,
  (key) => {
    formMode.value = componentList.value[key]?.option || {}
  },
  {
    immediate: true,
  }
)


const getFormateData = () => {
  const options = {
    celldata:[{}],
    label: '基本信息',
    prop: 'dp_service_object_extend',
    inline: false,
    showBtn: false,
    labelPosition: 'left',
    ...widgetFormConfig.value,
    column: componentList.value.map(item => {
      return item.option
    })
  }
  return options
}
const handleGetJson = () => {
  ElMessage.success('数据已处理-请查看控制台')
  console.log(JSON.stringify(getFormateData()), '组件数据')
}

const handlePreview = () => {
  formConfig.value = getFormateData()
  console.log(formConfig.value,'formConfig---')
  visibleForm.value = true
}

</script>

<style scoped></style>
